<template>
    <div class="admin-add-container">
        <el-card>
            <template #header>
                <span>{{ isEdit ? '编辑学生信息' : '新增学生' }}</span>
            </template>
            <el-form :model="adminForm" label-width="100px" :rules="rules" ref="formRef">
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="adminForm.userName" :disabled="isEdit" />
                </el-form-item>
                <el-form-item label="密码" prop="password" v-if="!isEdit">
                    <el-input v-model="adminForm.password" type="password" />
                </el-form-item>
                <el-form-item label="真实姓名" prop="realName">
                    <el-input v-model="adminForm.realName" />
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input-number v-model="adminForm.age" :min="15" :max="30" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="adminForm.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthDay">
                    <el-date-picker v-model="adminForm.birthDay" type="date" placeholder="选择出生日期" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                    <el-input v-model="adminForm.phone" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="adminForm.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="clean" :disabled="isEdit">重置</el-button>
                    <el-button type="danger" @click="router.push('/teacher')">取消</el-button>
                    <el-button type="primary" @click="submitForm">确定</el-button>
                </span>
            </template>
        </el-card>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import { add } from '@/api/admin'

const router = useRouter()
const formRef = ref(null)

const isEdit = ref(false)

const clean = () => {
    initForm();
    // 如果有 formRef，重置校验状态
    formRef.value && formRef.value.resetFields();
};

const adminForm = ref({
    id: null,
    userName: "",
    password: "",
    realName: "",
    age: null,
    role: 3,
    sex: 1,
    birthDay: "",
    phone: "",
    status: 1,
    userLevel: 1
})

// 初始化表单数据
const initForm = () => {
    adminForm.value = {
        id: null,
        userName: "",
        password: "",
        realName: "",
        age: null,
        role: 3,
        sex: 1,
        birthDay: "",
        phone: "",
        status: 1,
        userLevel: 1
    }
}


// 表单验证规则
const rules = {
    userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
    age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
    phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ],
    status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

onMounted(() => {
    if (localStorage.getItem('isEdit') === '1') {
        const data = localStorage.getItem('editadmin')
        if (data) {
            adminForm.value = JSON.parse(data)
            isEdit.value = true
        }
        // 用完清理，避免新增时被污染
        localStorage.removeItem('editadmin')
        localStorage.removeItem('isEdit')
    }
})

// 提交表单
const submitForm = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            const res = await add(adminForm.value)
            if(res.code == 1){
                ElMessage.success('添加成功')
                router.push('/teacher')
            }else{
                ElMessage.error('添加失败')
            }

        }
    })
}
</script>